<template>
    <div>
        <div class="Request-Service-layout">
            <div class="Request-Service-banner"></div>
            <div class=" m-tb-70">
                <div class="main-b">
                    <div class="step-two"></div>
                    <form>
                        <div class="step-two-view">
                            <h2>基础信息<span>温馨提示：请准确填写，谢谢合作</span></h2>
                            <table>
                                <tr>
                                    <td class="name"><span class="red">*</span>昵称：</td>
                                    <td><input v-model="detailObj.nickname"></td>
                                    <td class="name"><span class="red">*</span>性别：</td>
                                    <td>
                                        <label>
                                            <span class="radio_square" :class="[detailObj.sex == 1 ? 'checked' : '']" @click="detailObj.sex = 1">
                                                <input id="minimal-radio-9" name="minimal-radio"  type="radio">
                                            </span>
                                            男
                                        </label>
                                        <label>
                                            <span class="radio_square" :class="[detailObj.sex == 2 ? 'checked' : '']" @click="detailObj.sex = 2">
                                                <input id="minimal-radio-8" name="minimal-radio"  type="radio">
                                            </span>
                                            女
                                        </label>
                                    </td>
                                    <td class="name" style="width:95px;"><span class="red">*</span>出生日期：</td>
                                    <!-- datePicker -->
                                    <td class="service-date"><DatePicker type="date" style="width: 240px;height:50px;" v-model="datePicker"></DatePicker></td>
                                </tr>
                                <tr>
                                    <td class="name"><span class="red">*</span>QQ：</td>
                                    <td><input v-model="detailObj.qq" type="number"></td>
                                    <td class="name" style="width:95px;"><span class="red">*</span>所在城市：</td>
                                    <td class="cityTb">
                                        <Cascader :data="$cityAll" v-model="value1"></Cascader>
                                        <!-- <div class="select-container">
                                            <span class="select2-selection__rendered">请选择</span>
                                            <span class="select2-selection__arrow"></span>
                                        </div>
                                        <div class="select-container">
                                            <span class="select2-selection__rendered">市</span>
                                            <span class="select2-selection__arrow"></span>
                                        </div> -->
                                    </td>
                                    <td><span class="red">*</span>星座：</td>
                                    <td><input v-model="star" readonly></td>
                                </tr>
                            </table>
                            <div class="XXZP">
                                <span class="red">*</span>形象照：
                                <label class="red">图片至少1张，最多可上传6张，第一张为封面，图片规格：PNG/JPG，建议大小：750×1334px</label>
                            </div>
                            <div class="Instagram">
                                <ul>
                                    <li class="cover" v-for="(item,index) in photoArr" :key="index">
                                        <img :src="$imgPath(item.file.url)">
                                        <span v-if="index == 0">封面</span>
                                        <div class="shade" v-if="index != 0"></div>
                                        <div class="Instagram-bt" v-if="index != 0">
                                            <a @click="setbgImg(item.id)">设为封面</a>
                                            <a @click="dropPhoto(item.id)">删除</a>
                                        </div>
                                    </li>
                                    <li class="upload-li" v-if="photoArr.length < 6">
                                        <Upload
                                            ref="upload"
                                            :on-success="handleSuccess"
                                            :format="['jpg','jpeg','png']"
                                            :max-size="2048"
                                            multiple
                                            type="drag"
                                            :data="uploadData"
                                            :action="$imgPath(photoAction)"
                                            style="display: inline-block;width:160px;">
                                            <div style="width: 160px;height:238px;line-height: 238px;">
                                                <Icon type="ios-camera" size="40"></Icon>
                                            </div>
                                        </Upload>
                                    </li>
                                </ul>
                            </div>
                            <h2>开通服务<span class="red">为必填项，请务必填写真实资料，最多可同时开通N项服务</span></h2>
                            <ul class="ServicesAvailable">
                                <li v-for="(item,index) in certifiedList" :key="index" @click="fwService(item.serviceId)">
                                    <img v-if="item.rz || item.isShow" :src="$imgPath(item.serviceLogo)">
                                    <img v-else :src="$imgPath(item.serviceLogoNone)">
                                    <label>{{item.serviceName}}</label>
                                    <label v-if="item.serverAuthStatus == 1" style="color:#d84e4d;font-size:14px;">(已开通)</label>
                                    <label v-if="item.serviceStatus == 2" style="font-size:14px;">(开通失败)</label>
                                    <label v-if="item.serviceStatus == 0 && item.serviceStatus !=''" style="font-size:14px;">(认证中)</label>
                                    <label v-if="item.serviceStatus == ''" style="font-size:14px;">(未开通)</label>
                                </li>
                            </ul>
                            <div class="title"><span class="red">*</span>认证资料照：<label class="red">此图认证要求：1、电脑清晰截图，不能手机拍摄；2、游戏昵称与分手清晰；3、如需考核应上此号进行考核</label></div>

                            <div class="Pictures">
                                <div class="left">
                                    <a class="shili-box">
                                        <img v-if="shiliImg == ''" src="../../assets/img/Request-Service/上传图片.jpg">
                                        <img v-else :src="$imgPath(shiliImg)">
                                        <input type="file" name="" class="shili" id="" ref="avatarInput1" @change="changeImage()">
                                    </a>
                                </div>

                                <div class="right">
                                    <label>示例：</label>
                                    <img v-if="JSON.stringify(xiaoxi) =='{}'" src="../../assets/img/Request-Service/实例.jpg">
                                    <img v-else :src="$imgPath(xiaoxi.example)">
                                </div>
                            </div>
                            <div class="line">
                                <div class="title"><span class="red">*</span>认证说明：</div>

                                <textarea :placeholder="xiaoxi.introduce" v-model="descript"></textarea>
                            </div>


                            <div class="title"><span class="red">*</span>语音介绍：<label class="red">上传的录音可供游客试听，请上传正确的MP3文件，内容为简单的自我介绍</label></div>
                            <div class="voice">
                                <div class="voice-div">
                                    <a class="upload">
                                        <input type="file" name="" id="" accept="audio/mpeg" class="upload-viceo" ref="avatarInput2" @change="changeVoice()">
                                        {{viceoZt}}
                                    </a>
                                    <a class="audition" v-if="audioId" @click="audioPlay()">
                                        <span>{{viceoTime}}</span>
                                        试听
                                        <audio :src="$imgPath(audioId)" controls="controls" id="audioPlay"></audio>
                                    </a>
                                </div>
                                <p>例如：您好，我是**，话多不唠叨，心态稳定脾气好，全天在线，下单秒接，接单秒上号，快快来下单吧！</p>
                            </div>

                            <div class="Lv">
                                <span class="red">*</span>段位：
                                <div class="select-container">
                                    <!-- <span class="select2-selection__rendered">尊贵铂金</span>
                                    <span class="select2-selection__arrow"></span> -->
                                    <!-- <select v-model="dwValue" class="select2-selection__rendered" @change="configData(dwValue)">
                                        <option value="">请选择</option>
                                        <option :value="item.id" v-for="(item,index) in dwList" :key="index">{{item.name}}</option>
                                    </select> -->
                                    <Select class="select2-selection__rendered" v-model="dwValue">
                                        <Option v-for="item in dwList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                                    </Select>
                                </div>

                                <!-- <a class="commit">保存</a> -->
                            </div>

                            <div class="commit-gr">
                                <a @click="saveUser(),addService()">提交入驻申请</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            photoAction:'file/upload', //上传相册地址 
            value1: [],     // 城市选择
            star:'',        // 星座
            datePicker:'',  // 出生日期
            sexChecked:1,   // 选择性别
            photoArr:[],    // 用户相册信息
            detailObj:{},   // 用户信息
            uploadData:{            //  上传图片需要的参数，记得修改
                model:'user/photo'
            },
            certifiedList:[],       // 已认证的服务
            shiliImg:'',            // 示例图片地址
            xiaoxi:{},              // 示例消息结合
            dwList:[],              // 段位列表
            audioId:'',             // 上传的语音路径
            descript:'',            // 描述
            serviceId:'',           // 点击服务  获取服务id
            dwId:'',                // 段位id
            dwValue:'',             // 段位选择
            viceoZt:'上传语音',       // 语音上传状态
            viceoTime:0,            // 上传语音的时间
            clearTime:'',            //  清楚时间
        }
    },
    watch:{
        // 根绝所选的日期自动选择星座
        datePicker(newVal,oldVal){
            if(newVal != ''){
                let d = new Date(newVal)
                let day = ''
                if(d.getDate()<10){
                    day = '0' + d.getDate()
                }else{
                    day = d.getDate()
                }
                let time=(d.getMonth() + 1).toString() + day
                let dd = `${d.getFullYear()}-${d.getMonth() + 1}-${day}`
                this.detailObj.birthday = dd
                this.star = this.$star(time)      
            }else{
                this.star = ''
            }
        },
        // 城市选择
        value1(newVal,oldVal){
            this.detailObj.city = `${newVal[0]}/${newVal[1]}`
        }
    },
    mounted(){
        this.screening()
        this.getUserImg()
        this.certified()
    },
    methods:{
        //获取用户相册信息
         getUserImg(){                
            apiHttp.apiCenter.getUserImgme('',resp=>{                                
                if(resp.code==200){
                    this.photoArr = resp.data.content
                }                         
            })
        },   
        // 获取个人资料
        screening(){
            apiHttp.apiCenter.detail('',resp => {
                this.detailObj = resp
                this.datePicker = this.detailObj.birthday
                if(this.detailObj.city!=null){
                    this.value1.push(this.detailObj.city);
                    this.value1 = this.detailObj.city.split('/')
                }		
            })
        },
        //设为封面
        setbgImg(id){
            apiHttp.apiCenter.setUserImg(id,'',resp=>{                              
                if(resp.code == 200){
                    this.getUserImg()
                    this.$Message.success("设置成功！")                           
                }  
            })
        },
        //删除相册
        dropPhoto(id){
            apiHttp.apiCenter.deleteUserImg(id,'',resp=>{        
                if(resp.code == 200){
                    this.getUserImg()
                    this.$Message.success("删除成功！")                             
                } 
            })
        },
        // 图片你上传成功之后保存
        handleSuccess(resp){
            apiHttp.apiCenter.addUserImg(resp.data.fileId,'',resp=>{                       
                if(resp.code==200){
                    this.getUserImg()
                    this.$Message.success("上传成功！")
                }
            }) 
        },
        // 已认证的服务
        certified(){
            apiHttp.apiCenter.myService('',resp=>{
                if(resp.code == 200){
                    for(let i = 0; i < resp.data.length; i++){
                        resp.data[i].rz = true
                        resp.data[i].isShow=true
                    }
                    this.certifiedList = resp.data
                    this.unauthorized()
                }
            })
        },
        // 为认证服务
        unauthorized(){
            apiHttp.apiCenter.UnauthorizedService('',resp=>{
                if(resp.code == 200){
                    for(let i = 0; i<resp.data.length; i++){
                        for(let j = 0; j < resp.data[i].listService.length; j++){
                            resp.data[i].listService[j].rz=false
                            resp.data[i].listService[j].isShow=false
                            this.certifiedList.push(resp.data[i].listService[j])
                        }
                    }
                }
            })
        },
        // 上传示例图片
        changeImage(){
            let fd = new FormData()
            fd.append('model','serviceAuth/image')
            if (this.$refs.avatarInput1.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput1.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.shiliImg = resp.data.url
                }
            })
        },
        // 上传语音
        changeVoice(){
            let self = this
            let fd = new FormData()
            fd.append('model','serviceAuth/audio')
            if (this.$refs.avatarInput2.files.length !== 0) {
                fd.append('file', this.$refs.avatarInput2.files[0])
            }
            apiHttp.apiCenter.uploadImg(fd,resp=>{
                if(resp.code == 200){
                    this.viceoZt = '上传成功'
                    this.audioId = resp.data.url
                    this.$Message.success("上传语音成功！")
                    if(this.audioId){
                        setTimeout(()=>{
                            let audioTime = Math.floor(document.getElementById('audioPlay').duration)
                            self.viceoTime = audioTime
                        },1000)
                        
                    }
                }
            })
        },
        // 服务查询
        fwService(serviceId){
            for(let i = 0; i < this.certifiedList.length; i++){
                if(this.certifiedList[i].serviceId == serviceId){
                    this.certifiedList[i].isShow = true
                }else{
                    this.certifiedList[i].isShow = false
                }
            }
            this.serviceId = serviceId
            let params = {
                serviceId:serviceId
            }
            apiHttp.apiCenter.getServiceInfo(params,resp=>{
                if(resp.code == 200){
                    // 段位查询
                    for(let i = 0; i < resp.data.attributeFirst.length; i++){
                        if(resp.data.attributeFirst[i].code == 'division'){
                            this.dwList = resp.data.attributeFirst[i].attributeSecond
                        }
                    }
                    this.xiaoxi = resp.data
                }
            })
        },
        // 点击播放语音
        audioPlay(){
            let self = this
            let audio = document.getElementById('audioPlay')
            let audioTime = Math.floor(audio.duration)
            if(audio.paused)                     {                 
                audio.play() // 这个就是播放  
                self.clearTime = setInterval(()=>{
                    self.viceoTime--
                    if(self.viceoTime == 0){
                        clearInterval(self.clearTime)
                        self.viceoTime = audioTime
                    }
                },1000)
            }else{
                clearInterval(self.clearTime)
                audio.pause()// 这个就是暂停
            }
        },
        // 保存用户信息
        saveUser(){
            let params = this.detailObj         
            apiHttp.apiCenter.updateUser(params,resp=>{               
                if(resp.code==200){
                    
                }
            })
        },
        // 提交服务
        addService(){
            let params = {
                audioId:this.audioId,
                authImage:this.shiliImg,
                descript:this.descript,
                serviceId:this.serviceId,
            }
            apiHttp.apiCenter.addServiceFw(this.dwValue,params,resp=>{
                if(resp.code == 200){
                    this.$Message.success('提交服务认证成功，请耐心等待...')
                    this.$emit('serviceTabIdValue',3)
                    this.certified()
                }else{
                    this.$Message.warning(resp.message)
                }
            })
        }
    }
}
</script>
<style scoped>
.select-container{
    border: none;
}
.voice-div{
    height: 60px;
    width: 100%;
}
</style>

